<template>
	<view>
		<view class="sousuo">
			<view class="input-wrap" @click="naviTo">
				<icon type="search" size="16" class="image"/>
				<input class="input" type="text" value="" placeholder="Dribbble" placeholder-style="text-align:left"/>
				<icon type="clear" size="16" class="imagess"/>
			</view>
			
			<view>
				<text class="qx">取消</text>
			</view>
			
		
			
		</view>
		
		<view class="qj">
		<view>
			<image src="../../../../static/page/头像(1).png"></image>
		</view>
		
		<view class="wz">
		<view >
			<text class="wz1">Dribbble</text>
		</view>
		<view>
			<text class="wz2">摄影与录像</text>
		</view>
		<view>
			<text class="wz3">★★★★★  134</text>
		</view>
		
		<view class="hq">
			<button class="hq1">获取</button>
		</view>
		</view>
		</view>
		<image src="../../../../static/page/图片1.png" class="tp"></image>
		<image src="../../../../static/page/图片2.png" class="tp"></image>
		<image src="../../../../static/page/图片3.png" class="tp"></image>
		</view>
		
		
		
	</view>
	
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	
	.input-wrap{
	    width: 581rpx;
	  	height: 72rpx;
	  	margin:20rpx auto;
	  	background-color: rgba(242, 242, 242, 1);
	  	border-radius: 16rpx;
		display: flex;
		align-items: center;
		
		
		.image{
			width: 32rpx;
			height: 32rpx;
			margin-top: 8rpx;
			margin-right: 20rpx;
			margin-left: 30rpx;
			padding-right: 19rpx;
		}
		.input{
			color: #333333;
			font-size: 28rpx;
			text-align: left;
			
		}
	}
	.imagess{
		margin-left: 128rpx;
		
	}
	.sousuo{
		width: 100vw;
		display: flex;
		align-items: center;  //在y轴居中
		justify-content: space-between; //在x轴靠边
		 border-bottom: 2rpx solid #ececec;
		 position: fixed;
		
		
		
		
	}
	.qx{
		margin-right: 32rpx;
		color: #057cff;
	}
	
	image{
		width:124rpx ;
		height:124rpx ;
		margin-top: 145rpx;
		margin-left: 39rpx;
	}
	
	.wz{
		margin-top: -130rpx;
		margin-left: 190rpx;
	}
	.hq{
		width: 160rpx;
		height: 50rpx;
		margin-left: 350rpx;
		margin-top: -100rpx;
	
		
	}
	
	.wz1{
		color: #000000;
	}
	.wz2{
		color: #999999;
		font-family: '小楷';
		font-size: 14rpx;
	}
	.wz3{
		color: #999999;
		font-size: 30rpx;
	}
	.hq1{
	
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #2a82e4;
		font-weight: bold;
		border-radius: 40rpx;
		
	}
	.hq1::after{
		border: none;
	}
	
	.tp{
		width: 212rpx;
		height: 379rpx;
		margin-top: 85rpx;
		margin-left: 32rpx;
		border-radius: 10rpx;
		
	}
	


</style>
